﻿@{
    Layout = "~/Views/Shared/_PopupLayout.cshtml";
}

<script language="JavaScript" src="//ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script language="JavaScript" src="~/Scripts/scriptcam.min.js"></script>
<script language="JavaScript">
    $(document).ready(function () {
        $("#webcam").scriptcam({
            showMicrophoneErrors: false,
            onError: onError,
            cornerRadius: 20,
            cornerColor: 'e3e5e2',
            onWebcamReady: onWebcamReady,
            uploadImage: 'upload.gif',
            onPictureAsBase64: base64_tofield_and_image,
            path: '@Html.BaseUrl()Scripts/'
        });
    });
    function base64_tofield() {
        $('#formfield').val($.scriptcam.getFrameAsBase64());
    };
    function base64_toimage() {
        CloseWin($.scriptcam.getFrameAsBase64(), idWindow);
        
    };
    function base64_tofield_and_image(b64) {
        $('#formfield').val(b64);
        $('#image').attr("src", "data:image/png;base64," + b64);
    };
    function changeCamera() {
        $.scriptcam.changeCamera($('#cameraNames').val());
    }
    function onError(errorId, errorMsg) {
        $("#btn1").attr("disabled", true);
        $("#btn2").attr("disabled", true);
        alert(errorMsg);
    }
    function onWebcamReady(cameraNames, camera, microphoneNames, microphone, volume) {
        $.each(cameraNames, function (index, text) {
            $('#cameraNames').append($('<option></option>').val(index).html(text))
        });
        $('#cameraNames').val(camera);
    }
</script>
	
<div style="width:330px;float:left;">
    <div id="webcam">
    </div>
    <div style="margin:5px;">
        <img src="@Html.BaseUrl()Content/default/images/webcamlogo.png" style="vertical-align:text-top" />
        <select id="cameraNames" size="1" onchange="changeCamera()" style="width:245px;font-size:10px;height:25px;"></select>
    </div>
</div>
<div style="width:135px;float:left;">
    <p><button class="btn btn-small" id="btn2" onclick="base64_toimage()">Snapshot to image</button></p>
</div>



